<template>
  <transition name="slide">
    <div class="error">
      <div class="error-404">
        <div class="not-found">
          <div class="round1"></div>
          <div class="round2"></div>
          <div class="text">Not Found</div>
        </div>
        <img src="./img/500.png" alt="404,Not Found" class="error-img">
        <div class="img1"><img src="./img/sam.png" alt="" class="error-img1"></div>
        <div class="btn"><a href="/" class="go-home">Go Home</a></div>
        <div class="logo"><img src="./img/logo.png" alt="" class="logo-img"></div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data(){
      return{

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
  .error
    position: fixed
    top: 0
    bottom: 0
    z-index: 111
    width: 100%
    background: $color-white
    color #333
    max-width 414px
    max-height:800px
  .error-404
    width:100%
    height: 100%
    overflow hidden
    position relative
    .not-found
      position relative
      .round1
        width: 300px;
        height: 300px;
        border: 1px solid #bbb;
        border-radius: 50%;
        position: absolute;
        left: -136px;
        top: -170px;
      .round2
        width: 400px;
        height: 400px;
        border: 1px solid #bbb;
        border-radius: 50%;
        position: absolute;
        left: -156px;
        top: -300px;
      .text
        color: #bbbbbb
        font-size:16px;
        height:100px;
        line-height:100px;
        margin-left:35px;
  .error-img
    width: 70%
    margin-left: 15%;
    margin-top: 25%;
  .img1
    margin-top:20%
    text-align: center;
    .error-img1
      width:30px;
  .btn
    margin-top: 20%
    text-align center
    .go-home
      width: 160px;
      height: 36px;
      line-height: 36px;
      color: #18823a;
      border: 2px solid #18823a;
      border-radius: 30px;
      display: inline-block;
      font-size: 16px;
  .logo
    position:absolute
    bottom:2rem
    left:0;
    text-align center
    width: 100%;
    .logo-img
      height:30px






</style>
